<template>
  <div>
    <input ref="myInput" />
  </div>
</template>
<script setup lang='ts'>
import { ref,reactive, onMounted, watchEffect } from 'vue'

const myInput = ref(null)

// 初始化的时候让输入框自动聚焦
onMounted(() => {
  myInput.value.focus() // 推荐refs 来操作 DOM
  //   document.getElementById('myInput').focus() // 不推荐原生
})


// 当然，如果想通过监听一个模板引用的变化，我们可以这样做：
watchEffect(() => {
  if (myInput.value) {
    // myInput.value.focus()
  }
})
</script>
<style scoped lang='scss'>
</style>